<template>
  <section class="page_main">
    <h1 class="title">国际野马赛跑锦标赛</h1>
    <div class="wrap">
      <transition-group name="flip-list" tag="ul">
        <li v-for="(item,index) in items" class="item_wrap" :key="item.id" :style="calcWith(item)">
          <span class="item_name">{{item.name}}</span>
          <aside class="item_bar">{{nums[index]}}m</aside>
        </li>
      </transition-group>
    </div>
    <aside class="btn_class" v-on:click="start">start</aside>

    <transition name="fold">

      <section class="result_wrap" v-show="champ.name">
        <aside class="result_layer">
          <h1> <span>追风-{{champ.name}}</span> 获胜！！！</h1>
        </aside>
      </section>

    </transition>

  </section>

</template>
<script>
export default {
  data() {
    return {
      champ: {
        name: ""
      },
      turn: 0,
      nums: [],
      items: [
        {
          name: "彤彤",
          num: 10,
          id: 1
        },
        {
          name: "瑶瑶",
          num: 10,
          id: 2
        },
        {
          name: "小野",
          num: 10,
          id: 3
        },
        {
          name: "灿灿",
          num: 10,
          id: 4
        },
        {
          name: "凡凡",
          num: 10,
          id: 5
        }
      ]
    };
  },
  computed: {
    maxNum() {
      return this.items.sort((a, b) => a.num - b.num)[this.items.length - 1];
    }
  },
  watch: {
    items(newValue, oldValue) {
      var self = this;
      function animate(time) {
        requestAnimationFrame(animate);
        TWEEN.update(time);
      }

      newValue.forEach((item, index) => {
        new TWEEN.Tween({tweeningNumber: oldValue[index].num})
          .easing(TWEEN.Easing.Quadratic.Out)
          .to({tweeningNumber: newValue[index].num}, 500)
          .onUpdate(function() {
            self.nums[index] = this.tweeningNumber.toFixed(0);
          })
          .start();
        animate();
      });
    }
  },
  mounted() {},
  methods: {
    shuffle() {
      this.items.map((item, index) => {
        let randNum = Math.floor(Math.random() * 100);
        item.num += randNum;
      });
      this.sort();
    },
    start() {
      this.shuffle();
      let timer = setInterval(() => {
        this.turn += 1;
        console.log(this.turn);
        this.shuffle();
        if (this.turn > 5) {
          clearInterval(timer);
          this.gameOver();
        }
      }, 1000);
    },
    gameOver() {
      setTimeout(() => {
        this.champ = this.maxNum;
      }, 800);
    },
    sort() {
      this.items.sort((a, b) => -1);
    },
    calcWith(item) {
      let rate = (item.num / (this.maxNum.num * 1.3)) * 100;
      return {
        width: `${rate}%`
      };
    }
  },
  components: {}
};
</script>

<style lang="less" scoped>
.result_wrap {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;

  .result_layer {
    width: 5rem;
    height: 3rem;
    background: white;
    border-radius: 0.3rem;

    h1 {
      font-size: 0.5rem;
      font-weight: bold;
      line-height: 3rem;
      text-align: center;
      span {
        color: red;
      }
    }
  }
}

.fold-enter-active,
.fold-leave-active {
  transition: all 0.8s ease-in-out;
}
.fold-enter,
.fold-leave-active {
  transform: translate3d(0, 0, 0) scale(0);
}

.flip-list-move {
  transition: transform 1s;
}

.title {
  margin: 1rem auto;
  text-align: center;
}

.wrap {
  margin: 1rem 2rem;
  box-sizing: border-box;
  border: 1px solid red;
}

.item_wrap {
  position: relative;
  margin-bottom: 0.8rem;
  height: 0.3rem;
  background: red;
  transition: all 1s;

  .item_name {
    position: absolute;
    left: -0.2rem;
    transform: translate(-100%, 0);
  }

  .item_bar {
    position: absolute;
    right: -0.2rem;
    transform: translate(100%, 0);
  }
}

.btn_class {
  margin: 0.8rem 3rem;
  background: blue;
  color: white;
  line-height: 0.6rem;
  height: 0.6rem;
  text-align: center;
  border-radius: 0.1rem;
  font-size: 0.3rem;
}
</style>
